---
title: Button Group
description: Group buttons together with shared borders and rounded logic.
component: ButtonGroup
---

<LiveComponent language="tsx">
{`
  import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";

  <ButtonGroup>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
    <Button>Button 3</Button>
  </ButtonGroup>
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    orientation: {
      description: "Layout direction for the group",
      type: '"horizontal" | "vertical"',
      required: false,
      default: '"horizontal"',
    },
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Variants & Sizes

<LiveComponent language="tsx">
{`
  import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4">
    <ButtonGroup>
      <Button variant="primary" size="md">Button 1</Button>
      <Button variant="primary" size="md">Button 2</Button>
      <Button variant="primary" size="md">Button 3</Button>
    </ButtonGroup>
    <ButtonGroup>
      <Button variant="outline" size="md">Button 1</Button>
      <Button variant="outline" size="md">Button 2</Button>
      <Button variant="outline" size="md">Button 3</Button>
    </ButtonGroup>
  </div>
`}
</LiveComponent>

### Orientation

<LiveComponent language="tsx">
{`
  import { Button, ButtonGroup } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-8">
    <ButtonGroup orientation="horizontal">
      <Button size="md">A</Button>
      <Button size="md">B</Button>
      <Button size="md">C</Button>
    </ButtonGroup>
    <ButtonGroup orientation="vertical">
      <Button size="md">A</Button>
      <Button size="md">B</Button>
      <Button size="md">C</Button>
    </ButtonGroup>
  </div>
`}
</LiveComponent>


